<template>
  <div class="apiLookIndex">
    <div class="query">
      api名称：<el-input
        size="small"
        style="width: 200px"
        placeholder="请输入api名称"
        v-model="query.filter.apiName"
      ></el-input>
      服务名称：<el-input
        size="small"
        style="width: 200px"
        placeholder="请输入服务名称"
        v-model="query.filter.serverName"
      ></el-input>
      <el-date-picker
        v-model="value2"
        type="datetimerange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        size="small"
        style="margin-left: 5px"
        @change="time_change"
      >
      </el-date-picker>
      <el-button
        size="small"
        icon="el-icon-search"
        style="margin-left: 10px"
        @click="getList(true)"
      ></el-button>
    </div>
    <div class="body" style="margin-top: 10px">
      <el-table :data="tableData" border style="width: 100%" height="693">
        <el-table-column prop="serverName" label="服务名称"> </el-table-column>
        <el-table-column prop="serverType" label="服务类型"> </el-table-column>
        <el-table-column prop="apiName" label="api名称"> </el-table-column>
        <el-table-column prop="apiType" label="api类型"> </el-table-column>
        <el-table-column prop="requestTime" label="访问时间"> </el-table-column>
        <el-table-column prop="duration" label="响应时长">
          <template slot-scope="scope"> {{ scope.row.duration }} ms </template>
        </el-table-column>
        <el-table-column prop="statusCode" label="状态码"> </el-table-column>
      </el-table>
    </div>
    <div class="page" style="text-align: center; margin-top: 10px">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="query.pageSize"
        :current-page="query.currentPage"
        @current-change="page_change"
        style="display: inline-block"
      >
      </el-pagination>
      <span class="demonstration">
        总 <span style="color: red">{{ total }}</span> 条数据
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: {
        currentPage: 1,
        pageSize: 29,
        filter: {
          apiName: "",
          serverName: "",
          startTime: "",
          endTime: "",
        },
      },
      tableData: [],
      total: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList(flag) {
      if (flag) {
        this.query.currentPage = 1;
      }
      this.$post(
        baseUrl.jhzxIp + "/T1/api/v1/Platform/CcLog/GetList",
        this.query
      ).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    page_change(val) {
      this.query.currentPage = val;
      this.getList();
    },
    time_change() {
      console.log(this.value2);
      this.query.filter.startTime = this.value2[0];
      this.query.filter.endTime = this.value2[1];
      this.getList(true);
    },
  },
};
</script>

<style>
.apiLookIndex {
  padding: 20px;
}
</style>
